<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div class="edit-form">
        <el-form 
        ref="userForm" 
        label-width="220px"
        status-icon
        :model="userInfo"
        :rules="rules"
        >
          <!-- 姓名 -->
          <el-row type="flex" justify="center"
          >
            <el-col :span="12" :pull="1">
              <el-form-item label="姓名：" prop="username">
                <el-input v-model="userInfo.username" 
                size="small"  class="inputW" />
              </el-form-item>
            </el-col>

          </el-row>
          <!-- 工号 -->
          <el-row type="flex" justify="center">
            <el-col :span="12" :pull="1">
              <el-form-item label="工号：" prop="workNumber">
                <!-- 注意：工号是系统生成的不允许被修改,禁用这个输入框，只让看不让写，所以v-model 依然要添加实现双向绑定 -->
                <el-input 
                disabled 
                v-model="userInfo.workNumber"
                size="small" class="inputW" />
              </el-form-item>
            </el-col>
          </el-row>
          <!--手机  -->
          <el-row type="flex" justify="center">
            <el-col :span="12" :pull="1">
              <el-form-item label="手机：" prop="mobile">
                <!-- 注意：当前项目中手机号在编辑模式下是不能修改的，因为涉及到用户名登录，所以通过$route.params
                .id判断是否为编辑模式。但是$route.params.id得到的是一个数字，但是disabled值类型需要的是布尔型，所以需要将$route.params.id转化为true或者false。

                方法一：通过三元运算符==>$route.params.id?true:false;
                方法二：通过取反符号===>!!$route.params.id;
                 -->
                <el-input
                  :disabled="$route.params.id?true:false"
                  v-model="userInfo.mobile"
                  size="small"
                  class="inputW"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 部门 -->
          <el-row type="flex" justify="center">
            <el-col :span="12" :pull="1">
              <el-form-item label="部门：" prop="departmentId">
                <!-- 放置及联部门组件 -->
                <SelectTree  class="inputW"
                v-model="userInfo.departmentId"
                ></SelectTree>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 聘用形式 -->
          <el-row type="flex" justify="center">
            <el-col :span="12" :pull="1">
              <el-form-item label="聘用形式：" prop="formOfEmployment">
                <el-select  
                v-model="userInfo.formOfEmployment"
                size="small" 
                class="inputW"

                >
                <el-option label="正式" :value="1">

                </el-option>
                <el-option label="非正式" :value="0">

                </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 入职时间 -->
          <el-row type="flex" justify="center">
            <el-col :span="12" :pull="1">
              <el-form-item label="入职时间：" prop="timeOfEntry">
                <el-date-picker
                  v-model="userInfo.timeOfEntry"
                  size="small"
                  type="date"
                  value-format="yyyy-MM-dd"
                  class="inputW"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 转正时间 -->
          <el-row type="flex" justify="center">
            <el-col :span="12" :pull="1">
              <el-form-item label="转正时间：" prop="correctionTime">
                <el-date-picker
                  v-model="userInfo.correctionTime"
                  size="small"
                  type="date"
                  value-format="yyyy-MM-dd"
                  class="inputW"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 员工头像 -->
          <el-row type="flex" justify="center">
            <el-col :span="12" :pull="1">
              <el-form-item label="员工头像：">
                <!-- 放置上传图片组件 -->
                <ImageUpload
                v-model="userInfo.staffPhoto"
                >

                </ImageUpload>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 保存个人信息 -->
          <el-row type="flex" justify="center">
            <el-col :span="6" style="margin-left:220px">
              <el-button @click="saveData"  type="primary">保存更新</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
import SelectTree from './components/select-tree.vue'
import ImageUpload from './components/image-upload.vue'
import {addEmployee,getEmployeeDetail,updateEmployee} from '@/api/employee'
import {Message} from 'element-ui'
export default {
  components:{
    SelectTree,
    ImageUpload
  },
   created(){
    // 如果有id那么说明是查看员工详情则调用接口，如果没有那么说明是新增员工，不用调该接口
    this.$route.params.id && this.getEmployeeDetails()
    
    
  },
  data() {
    return {
      // 表单数据初始化
      userInfo: {
        username: '', // 用户名
        mobile: '', // 手机号
        workNumber: '', // 工号
        formOfEmployment: null, // 聘用形式
        departmentId: null, // 部门id
        timeOfEntry: '', // 入职时间
        correctionTime: '', // 转正时间
        staffPhoto:''//员工头像
      },
      // 表单校验规则
      rules: {
        username: [{ required: true, message: '请输入姓名', trigger: 'blur' }, {
          min: 1, max: 4, message: '姓名为1-4位'
        }],

        mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }, {
        //   pattern 正则表达式
          pattern: /^1[3-9]\d{9}$/,
          message: '手机号格式不正确',
          trigger: 'blur'
        }],

        formOfEmployment: [{ required: true, message: '请选择聘用形式', trigger: 'blur' }],

        departmentId: [{ required: true, message: '请选择部门', trigger: 'blur' }],

        timeOfEntry: [{ required: true, message: '请选择入职时间', trigger: 'blur' }],

        correctionTime: [{ required: true, message: '请选择转正时间', trigger: 'blur' }, {
          // 自定义校验
          validator: (rule, value, callback) => {
            if (this.userInfo.timeOfEntry) {
              if (new Date(this.userInfo.timeOfEntry) > new Date(value)) {
                callback(new Error('转正时间必须大于入职时间'))
                return
              }
            }
            callback()
          }
        }]
      }

    }
  },
  methods: {
    // 保存更新员工成功调用新增/编辑接口
    async saveData() {
      await this.$refs.userForm.validate()
      if(this.$route.params.id){
        // 编辑模式
        // 注意：编辑模式下由于已经调用了getEmployeeDetails函数并且将结果赋值给了userInfo，此时userInfo里面已经有了id（可通过vue调试查看），而源代码中我们是看不到的，所以在调用编辑接口时，不用格外的给userInfo加id字段，直接将userInfo传入即可。
        await updateEmployee(this.userInfo)
        // 成功后提示用户
        Message.success('更新成功')
      }else{
        // 新增模式
         await addEmployee(this.userInfo)
        // 成功后提示用户
        Message.success('添加成功')
      }
     
      //无论新增还是编辑，成功完成后都要重新跳转到员工列表页
      /*注意：*/  
      // 1.页面跳转相当于手动刷新，不需要再到员工列表中调用获取数据接口，只有在当前页面不跳转的情况下，数据库数据发生变化才需要重新调用接口来达到同步更新渲染
      // 2.在vue中，页面跳转，那么该页面就会组件销毁，再次进入时，会重新创建组件，既然组件销毁了，那么页面的表单数据也就自然清空了，再次进入也就是没有数据了，所以不用特意清空表单。但是如果页面不跳转，那么就需要手动清空表单数据
      this.$router.push('/employee')
    },
    // 调用获取员工详情数据接口
    async getEmployeeDetails(){
      const result=await getEmployeeDetail(this.$route.params.id)
      // 对获取到的员工数据进行切片处理
      if(this.$route.params.id!=="1"){
        if(this.$route.params.id==="5"){
        result.departmentId=15

        }
        result.username=result.username.slice(2)
      }else{
        result.departmentId=2
      }
      // console.log(result);
      this.userInfo=result
      
    }

  },
 
}
</script>

<style scoped lang="scss">
    .edit-form {
      background: #fff;
      padding: 20px;
      .inputW {
        width: 380px
      }
    }

</style>